<template>
  <div id="app">
    <div class="imgbox">
      <div class="imglist">
        <imgcard
          v-for="elm in imgjson"
          :elm="elm"
          :full="fullScreen"
          :key="elm.name"
          @click="viewimg(elm)"
        />
      </div>
    </div>
    <div class="viewbox" v-if="showbox">
      <img class="viewimg" :src="viewsrc" :alt="viewalt" />
      <Button
        class="viewbtn"
        type="primary"
        shape="circle"
        icon="close-round"
        @click="showbox = false"
        @mousedown="mousebig"
        >X
      </Button>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
//import imgjson from "./components/data.json";
import imgcard from "./components/imgcard";
import axios from "axios";

export default {
  name: "App",
  components: {
    imgcard,
  },
  data() {
    return {
      imgjson: null,
      viewsrc: "123",
      viewalt: "123",
      showbox: false,
    };
  },
  mounted() {
    // 监听（绑定）滚轮 滚动事件
    window.addEventListener("scroll", this.mousebig, true);
  },
  async created() {
    try {
      let res = await this.getHistoryData();
      //console.log(res.data);
      this.imgjson = res.data;
    } catch (err) {
      console.log(err);
      alert("请求出错！");
    }
  },
  methods: {
    // 封装axios请求，返回promise, 用于调用getHistoryData函数后作不同处理
    getHistoryData() {
      return new Promise((resolve, reject) => {
        axios
          .get("/data.json")
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },

    viewimg(e) {
      this.showbox = true;
      this.viewalt = e.name;
      this.viewsrc = e.path;
      console.log(this.showbox, this.viewsrc, e);
    },
    mousebig() {
      //console.log("滚轮", e);
    },
    fullScreen() {
      var doc = window.document;
      var docEl = doc.documentElement;

      var requestFullScreen =
        docEl.requestFullscreen ||
        docEl.mozRequestFullScreen ||
        docEl.webkitRequestFullScreen ||
        docEl.msRequestFullscreen;
      var cancelFullScreen =
        doc.exitFullscreen ||
        doc.mozCancelFullScreen ||
        doc.webkitExitFullscreen ||
        doc.msExitFullscreen;

      if (
        !doc.fullscreenElement &&
        !doc.mozFullScreenElement &&
        !doc.webkitFullscreenElement &&
        !doc.msFullscreenElement
      ) {
        requestFullScreen.call(docEl);
      } else {
        cancelFullScreen.call(doc);
      }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;

  background-color: #faf6f4;
  /* background-image: url("/以案为鉴_底部.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom; */
  width: 100vw;
  height: 100vh;
}
.imglist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-around;
}
.viewbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #555d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewimg {
  height: 100%;
  position: inherit;
  top: 0;
  left: 0;
}
.viewbtn {
  position: fixed;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(50%, -50%);
  background-color: #000a;
  color: #555a;
  font-size: 30px;
  line-height: 100px;
  text-align: left;
  border: 0;
  padding: 20px;
}
.viewbtn:hover {
  color: #fffd;
}
</style>
